<div>
  <div>
    <div class="left-panel">
      <div class="component-list">
        <nz-tabset [nzTabPosition]="nzTabPosition" style="height: 100%">
          @for (widgetType of widgetTypeConfig; track widgetType) {
          <nz-tab [nzTitle]="titleTemplate" (nzClick)="tabChange(widgetType.type)">
            <ng-template #titleTemplate>
              <div>
                <i nz-icon style="margin-right: 0 !important" [nzType]="widgetType.icon"></i>
                <div>{{ widgetType.name }}</div>
              </div>
            </ng-template>
            <div class="widget-config-list" nz-row [nzGutter]="16" cdkDropList [cdkDropListData]="widgetConfig"
              (cdkDropListDropped)="dropWidget($event)">
              @for (widget of currentWidgetTypeConfig; track widget) {
              <div nz-col class="gutter-row" [nzSpan]="12">
                <div cdkDrag (cdkDragMoved)="startDrag($event)" [title]="widget.title" [cdkDragData]="widget"
                  class="inner-box">
                  <!-- <div *cdkDragPreview class="ui-draggable-dragging" #previewContainer
                  style="position: absolute !important">
                  <div class="out" [ngStyle]="{display:isInContainer?'block':'none'}">
                    <div class="widget dashboardWidget inner-box" [ngClass]="widget.tag"></div>
                  </div>
                  <div class="in" [ngStyle]="{display:isInContainer?'none':'block'}">
                    <div class="widget dashboardWidget inner-box"
                      [ngStyle]="{width:widget.minWidth+'px',height:widget.minHeight+'px'}"
                      style="z-index: 1;position: absolute;" [ngClass]="widget.tag"></div>
                  </div>
                </div> -->
                  <div
                    style="height: 72px; display: flex; justify-content: center; align-items: center; flex-direction: column; overflow: hidden">
                    <div>
                      <img [src]="widget.imgPath" alt="Daemon低代码" style="width: 100%" />
                    </div>
                  </div>

                  <div class="widget-desc">
                    {{ widget.title }}
                  </div>
                </div>
              </div>
              }
            </div>
          </nz-tab>
          }
        </nz-tabset>
      </div>
    </div>
  </div>
  <app-dashboard-designer [displayConfig]="displayConfig" style="display: flex;"
    (elementLoaded)="initRightDesignPanel($event)" #dashboardDesigner
    [widgetList]="widgetList"></app-dashboard-designer>
</div>